<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<!--第一个表格-->
<table border='1' align="center" cellpadding="10">
	<caption><h1>用户数据</h1></caption>
	<thead>
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
			<td>邮箱</td>
			<td>操作</td>
		</tr>
	</thead>
	<tbody id="tb">
		<tr>
			<td>张三</td>
			<td>24</td>
			<td>男</td>
			<td>wyyzc@163.com</td>
			<td><input type="button" value="删除"></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td><input type="button" value='删除第一行' id='tdFirst'></td>
			<td><input type="button" value="删除最后一行" id='tdLast'></td>
		</tr>
	</tfoot>
</table>
<!--第二个表格-->
<form align='center'>
	<fieldset>
		<legend>添加数据</legend>
		<p>姓名:<input type="text" id="name" name="name"></p>
		<p>年龄:<input type="text" id="age" name="age"></p>
		<p>性别:
			<input type="radio" name="gender" id="male" value='男'  checked>男
			<input type="radio" name="gender" id="female" value='女'>女
		</p>
		<p>邮箱:<input type="text" name="email" id="email"></p>
		<input type="button" value="Add" id="btn">
	</fieldset>
</form>
</body>
<script type="text/javascript">
	//获取输入值name,age,gender,email(...document.getElementById(...).value为取id的值)
	function $(id){
		return document.getElementById(id);
	}
	function ww(ele){
		return document.createElement(ele);//创建元素节点
	}
	var btn=$('btn');//获取按钮id
	btn.onclick=function(){//定义点击事件
	var Name=$('name').value;
	var Age=$('age').value;
	var Gender=$('male').checked? $('male').value:$('female').value;//判断是否选中(checked) ?，默认选中为男，如选中就输出male的值否输出female
	var Email=$('email').value;
	//在第一个表格增加新的空格
	var newName=ww('td');
	var newAge=ww('td');
	var newGender=ww('td');
	var newEmail=ww('td');
	//将数据添加进空行 innerText(获取/设置标签中的内容属性)
	newName.innerText=Name;
	newAge.innerText=Age;
	newGender.innerText=Gender;
	newEmail.innerText=Email;
	//创建按钮删除功能
	var tdDel=ww('td');//定义tdDel，创建td
	var delBtn=ww('input');//定义delBtn，创建输入框
	delBtn.type='button';//定义类型为按钮
	delBtn.value='删除';//定义value为删除
	delBtn.onclick=function(){//定义单击事件
			$('tb').removeChild(this.parentNode.parentNode);//返回id为tb的元素(执行删除这个按钮this父级的父级后的值)的值
		}
	tdDel.appendChild(delBtn);//将删除按钮添加到td里
	var tr=ww('tr');//创建新的一行
	// 将上面所有的td都添加到tr中
	tr.appendChild(newName);
	tr.appendChild(newAge);
	tr.appendChild(newGender);
	tr.appendChild(newEmail);
	tr.appendChild(tdDel);
	$('tb').appendChild(tr);// 将tr添加到tbody中
	}
	//删除第一格和最后一个 firstChild/lastChild 
	var delFirst=$('tdFirst');
	var tbList=document.getElementById('tb');
	delFirst.onclick=function(){
			tbList.removeChild(tbList.childNodes[0]);
		}
	var delLast=$('tdLast');//有问题，睡觉不想了，白天有空继续
	delLast.onclick=function(){
			tbList.removeChild(tbList.childNodes[length-1]);
		}
</script>
</html>